<template>
	<div class="app-container" style="display: inline-block; vertical-align: top">
		<el-card style="margin: 20px" v-loading="loading">
			<div class="headerTitle">基于岳麓书院的知识图谱整理</div>
			<div id="main" style="width: 900px; height: 300px"></div
		></el-card>
	</div>
</template>
<script>
import { EleResize } from '@/utils/esresize' // 图表自适应
import { reqPoint1 } from '@/api'
import { reqLink1 } from '@/api'
import * as echarts from 'echarts'

const province = [
	'北京',
	'天津',
	'宁夏',
	'青海',
	'新疆',
	'甘肃',
	'陕西',
	'西藏',
	'云南',
	'贵州',
	'重庆',
	'四川',
	'澳门',
	'香港',
	'海南',
	'广西',
	'广东',
	'河南',
	'湖南',
	'湖北',
	'黑龙江',
	'吉林',
	'辽宁',
	'台湾',
	'安徽',
	'山东',
	'江西',
	'福建',
	'浙江',
	'江苏',
	'上海',
	'内蒙古',
	'山西',
	'河北'
]
export default {
	data() {
		return {
			dialogVisible: false,
			loading: true
		}
	},
	mounted() {
		// 初始画图
		this.initChart(document.getElementById('main'))
	},
	methods: {
		nodeClick(param, hidenode) {
			var data = param.data
			var id = data.id

			if (id) that.$router.push('/profile/editProfile/?id=' + id)
			else {
				if (param.dataType === 'node') {
					// console.log(params.data.name);
					let data = option.series[0]
					// 判断节点是否隐藏

					if (hidenode[param.data.name] === undefined) {
						hidenode[param.data.name] = []
						let nodename = []
						// 获取需要折叠的节点
						data.links.forEach((item) => {
							if (item.source === param.data.name) {
								// 把书院id放进来
								nodename.push(item.target)
							}
						})
						// 删除需要隐藏的节点数据
						// 遍历需要隐藏的书院id
						nodename.forEach((item) => {
							// 遍历所有的节点
							for (let i = 0; i < data.data.length; i++) {
								if (data.data[i].id == item) {
									hidenode[param.data.name].push(data.data[i])

									data.data.splice(i, 1)
									i = i - 1
								}
							}
						})
					}
					// 还原节点
					else {
						hidenode[param.data.name].forEach((item) => {
							data.data.push(item)
						})
						delete hidenode[param.data.name]
					}
					// 显示被隐藏的节点
					// console.log(hidenode);
					option.series[0].data = data.data
				}
			}
		},
		async initChart(domName) {
			let that = this
			var myChart = this.$echarts.init(domName)
			// 图表自适应
			const listener = function () {
				myChart.resize()
			}
			EleResize.on(domName, listener)

			const option = {
				backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
					{
						offset: 0,
						color: '#f7f8fa'
					},
					{
						offset: 1,
						color: '#cdd0d5'
					}
				]),
				color: ['#ee6666', '#91cc75', '#fac858', '#5470c6', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
				// title: {
				//   text: '岳麓书院知识图谱系统',
				//   textStyle: {
				//     color: '#000',
				//     fontWeight: 700,
				//     fontSize: 20,
				//     left: 'center',
				//   },
				// },

				// 提示框配置
				tooltip: {
					// formatter: function (x) {
					//   //设置提示框的内容和格式 节点和边都显示name属性
					//   if (x.data.name) return x.data.name;
					// },
				},

				legend: [
					{
						//图例
						formatter: (name) => {
							return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…')
						},
						tooltip: {
							show: true
						},
						selectedMode: 'false',
						bottom: 20,

						//关系图中需要与series中的categories的name保持一致
						data: ['华北地区', '华东地区', '东北地区', '华中地区', '华南地区', '西南地区', '西北地区']
					}
				],
				toolbox: {
					show: true, //是否显示右上角工具箱
					feature: {
						// dataView: { show: true, readOnly: true },
						restore: { show: true }, // 还原，复位原始图
						saveAsImage: { show: true }, // 保存为图片，
						myFull: {
							// 全屏
							show: true,
							title: '全屏',
							icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
							onclick: (e) => {
								// 全屏查看
								if (domName.requestFullScreen) {
									// HTML W3C 提议
									domName.requestFullScreen()
								} else if (domName.msRequestFullscreen) {
									// IE11
									domName.msRequestFullScreen()
								} else if (domName.webkitRequestFullScreen) {
									// Webkit
									domName.webkitRequestFullScreen()
								} else if (domName.mozRequestFullScreen) {
									// Firefox
									domName.mozRequestFullScreen()
								}
								// 退出全屏
								if (domName.requestFullScreen) {
									document.exitFullscreen()
								} else if (domName.msRequestFullScreen) {
									document.msExitFullscreen()
								} else if (domName.webkitRequestFullScreen) {
									document.webkitCancelFullScreen()
								} else if (domName.mozRequestFullScreen) {
									document.mozCancelFullScreen()
								}
							}
						}
					}
				},
				animationDuration: 3000,
				animationEasingUpdate: 'quinticInOut',
				series: [
					{
						type: 'graph',
						// name: 'China',
						// legendHoverLink: true,
						legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
						// hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画

						layout: 'force', //力导向图

						categories: [
							{ name: '华北地区', symbolSize: 40 },
							{ name: '华东地区', symbolSize: 40 },
							{ name: '东北地区', symbolSize: 40 },
							{ name: '华中地区', symbolSize: 40 },
							{ name: '华南地区', symbolSize: 40 },
							{ name: '西南地区', symbolSize: 40 },
							{ name: '西北地区', symbolSize: 40 }
							// { name: '湖南', symbolSize: 40 },
						],
						force: {
							repulsion: 100
						},
						// force: {
						//   repulsion: [1000, 2000], //节点之间的斥力因子,支持设置成数组表达斥力的范围
						//   edgeLength: [10, 20],
						//   layoutAnimation: false,
						//   friction: 0.1, //节点的移动速度。取值范围 0 到 1。
						//   edgeLength: [10, 50], //两个节点之间的距离，这个距离也会受 repulsion影响
						// },

						focusNodeAdjacency: true,
						roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
						draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。

						// 边两端的标记类型 默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'provinceow']
						edgeSymbol: ['', 'provinceow'],

						// 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
						edgeSymbolSize: [4, 8],

						// cursor: 'pointer',
						label: {
							show: true, // 图形上的文本标签， 可用于说明图形的一些数据信息， 比如值， 名称等
							// fontStyle: 'oblique',

							// position: 'inside',
							// formatter: '{b}',
							// position: "top",
							fontSize: 8,
							color: '#000', //如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
							// width: 100,
							overflow: 'break' //文字超出宽度是否截断或者换行。配置width时有效
						},

						lineStyle: {
							color: 'source',
							width: 2,
							curveness: 0,
							type: 'solid'
							// curveness: 0.4, //关系线的曲度，支持从 0 到 1 的值，值越大曲度越大。
						},

						// 边上的提示文字
						edgeLabel: {
							normal: {
								show: true,
								textStyle: {
									fontSize: 10
								},
								formatter(x) {
									if (x.data.value) return x.data.value
									else return ''
								}
							}
						},

						data: [
							{
								name: '中国',
								symbolSize: 80
							},
							{
								name: '北京',
								category: '华北地区'
								//1164.6,
								//399.2,
							},
							{
								name: '天津',
								category: '华北地区'
								//1172,
								//391,
							},
							{
								name: '河北',
								category: '华北地区'
								//1144,
								//380,
							},
							{
								name: '山西',
								category: '华北地区'
								//1125,
								//378,
							},
							{
								name: '内蒙古',
								category: '华北地区'
								//1116,
								//408,
							},
							{
								name: '上海',
								category: '华东地区'
								//1214,
								//312,
							},
							{
								name: '江苏',
								category: '华东地区'
								//1187,
								//320,
							},
							{
								name: '浙江',
								category: '华东地区'
								//1201,
								//302,
							},
							{
								name: '福建',
								category: '华东地区'
								//1193,
								//260,
							},
							{
								name: '江西',
								category: '华东地区'
								//1158,
								//286,
							},
							{
								name: '山东',
								category: '华东地区'
								//1187,
								//325,
							},
							{
								name: '安徽',
								category: '华东地区'
								//1172,
								//318,
							},
							{
								name: '台湾',
								category: '华东地区'
								//1215,
								//251,
							},
							{
								name: '辽宁',
								category: '东北地区'
								//1233,
								//518,
							},
							{
								name: '吉林',
								category: '东北地区'
								//1303,
								//608,
							},
							{
								name: '黑龙江',
								category: '东北地区'
								//1566,
								//997,
							},
							{
								name: '湖北',
								category: '华中地区',
								// id: 1,
								//1143,
								//305,
								draggable: 'true'
							},
							{
								name: '湖南',
								category: '华中地区'
								//1130,
								//282,
							},
							{
								name: '河南',
								category: '华中地区'
								//1136,
								//347,
							},
							{
								name: '广东',
								category: '华南地区'
								//1132,
								//231,
							},
							{
								name: '广西',
								category: '华南地区'
								//1095,
								//235,
							},
							{
								name: '海南',
								category: '华南地区'
								//1103,
								//200,
							},
							{
								name: '香港',
								category: '华南地区'
								//1141,
								//222,
							},
							{
								name: '澳门',
								category: '华南地区'
								//1133,
								//221,
							},
							{
								name: '四川',
								category: '西南地区'
								//1040,
								//306,
							},
							{
								name: '重庆',
								category: '西南地区'
								//1085,
								//326,
							},
							{
								name: '贵州',
								category: '西南地区'
								//1067,
								//265,
							},
							{
								name: '云南',
								category: '西南地区'
								//1027,
								//250,
							},
							{
								name: '西藏',
								category: '西南地区'
								//911,
								//299,
							},
							{
								name: '陕西',
								category: '西北地区'
								//1089,
								//342,
							},
							{
								name: '甘肃',
								category: '西北地区'
								//1037,
								//360,
							},
							{
								name: '新疆',
								category: '西北地区'
								//876,
								//437,
							},
							{
								name: '青海',
								category: '西北地区'
								//1017,
								//365,
							},
							{
								name: '宁夏',
								category: '西北地区'
								//1062,
								//384,
							}
						],
						links: [
							{
								source: '中国',
								target: '北京'
							},
							{
								source: '中国',
								target: '天津'
							},
							{
								source: '中国',
								target: '河北'
							},

							{
								source: '中国',
								target: '山西'
							},
							{
								source: '中国',
								target: '内蒙古'
							},
							{
								source: '中国',
								target: '上海'
							},
							{
								source: '中国',
								target: '江苏'
							},
							{
								source: '中国',
								target: '浙江'
							},
							{
								source: '中国',
								target: '福建'
							},
							{
								source: '中国',
								target: '江西'
							},
							{
								source: '中国',
								target: '山东'
							},
							{
								source: '中国',
								target: '安徽'
							},
							{
								source: '中国',
								target: '台湾'
							},
							{
								source: '中国',
								target: '辽宁'
							},
							{
								source: '中国',
								target: '吉林'
							},
							{
								source: '中国',
								target: '黑龙江'
							},
							{
								source: '中国',
								target: '湖南'
							},
							{
								source: '中国',
								target: '湖北'
							},
							{
								source: '中国',
								target: '河南'
							},
							{
								source: '中国',
								target: '广东'
							},
							{
								source: '中国',
								target: '广西'
							},
							{
								source: '中国',
								target: '海南'
							},
							{
								source: '中国',
								target: '香港'
							},
							{
								source: '中国',
								target: '澳门'
							},
							{
								source: '中国',
								target: '四川'
							},
							{
								source: '中国',
								target: '重庆'
							},
							{
								source: '中国',
								target: '贵州'
							},
							{
								source: '中国',
								target: '云南'
							},
							{
								source: '中国',
								target: '西藏'
							},
							{
								source: '中国',
								target: '陕西'
							},
							{
								source: '中国',
								target: '甘肃'
							},
							{
								source: '中国',
								target: '新疆'
							},
							{
								source: '中国',
								target: '青海'
							},
							{
								source: '中国',
								target: '宁夏'
							}
						]
					}
				]
			}
			option && myChart.setOption(option)

			let result = await reqPoint1()
			let res = result.data
			option.series[0].data.push(...res)

			let result1 = await reqLink1()
			let res1 = result1.data
			option.series[0].links.push(...res1)

			this.loading = false
			let hidenode = {}

			let data = option.series[0]

			for (let k = 0; k < province.length; k++) {
				let n = province[k]
				hidenode[n] = []
				let nodename = []
				data.links.forEach((item) => {
					if (item.source === n) {
						// 把书院id放进来
						nodename.push(item.target)
					}
				})
				// 删除需要隐藏的节点数据
				// 遍历需要隐藏的书院id
				nodename.forEach((item) => {
					// 遍历所有的节点
					for (let i = 0; i < data.data.length; i++) {
						if (data.data[i].id == item) {
							hidenode[n].push(data.data[i])
							data.data.splice(i, 1)
							i = i - 1
						}
					}
				})
			}
			//echarts图表点击跳转
			myChart.on('click', function (param) {
				var data = param.data
				var id = data.id

				if (id) that.$router.push('/profile/editProfile/?id=' + id)
				else {
					if (param.dataType === 'node') {
						// console.log(params.data.name);
						let data = option.series[0]
						// 判断节点是否隐藏

						if (hidenode[param.data.name] === undefined) {
							hidenode[param.data.name] = []
							let nodename = []
							// 获取需要折叠的节点
							data.links.forEach((item) => {
								if (item.source === param.data.name) {
									// 把书院id放进来
									nodename.push(item.target)
								}
							})
							// 删除需要隐藏的节点数据
							// 遍历需要隐藏的书院id
							nodename.forEach((item) => {
								// 遍历所有的节点
								for (let i = 0; i < data.data.length; i++) {
									if (data.data[i].id == item) {
										hidenode[param.data.name].push(data.data[i])

										data.data.splice(i, 1)
										i = i - 1
									}
								}
							})
						}
						// 还原节点
						else {
							hidenode[param.data.name].forEach((item) => {
								data.data.push(item)
							})
							delete hidenode[param.data.name]
						}
						// 显示被隐藏的节点
						// console.log(hidenode);
						option.series[0].data = data.data
					}
				}
				myChart.setOption(option)
			})
		}
	}
}
</script>
<style scoped>
.headerTitle {
	display: inline-block;
	position: relative;
	bottom: 5px;
	font-family: '阿里妈妈数黑体 Bold';
	margin-left: 10px;
	margin-bottom: 10px;
	font-weight: 700;
	color: #000;
	cursor: pointer;

	src: url('//at.alicdn.com/wf/webfont/cbN9fHghj2rI/KoPa6jf8_jfUg9NdaKi4o.woff2') format('woff2'),
		url('//at.alicdn.com/wf/webfont/cbN9fHghj2rI/O5W84MVVpvQNVBxq1_UVu.woff') format('woff');
	font-display: swap;
}
</style>
